import { Countdown, CountdownEventName, fillZero } from './countdown_1.js'
// import EventEmitter from './eventemitter.js'

class Vue  {
  constructor(options){
    this.$el = options.el
    this.$data = options.data
    this.obServer(this.$data)
    this.countdownElement = document.querySelector('.countdown-box')
  }

  obServer(data) {
    Object.keys(data).forEach(key=>{
      this.handleObServer(data, key, data[key])
    })
  }
  changeCountdownText(str){
    this.countdownElement.innerHTML = str
  }
  handleObServer(obj, key, value){
    if (typeof value === 'object') {
      this.obServer(value)
    }
    Object.defineProperty(obj, key, {
      get () {
        return value
      },
      set:(newValue)=>{
        if (newValue === value) return
        console.log('newValue',newValue)
        value = newValue
        this.changeCountdownText(newValue)
      }
    })
  }
}


var vue = new Vue({
  el: '#app',
  data: {
    countdownStr: ''
  }
})

const count_down = new Countdown(Date.now()+1000*60*60)
count_down.on(CountdownEventName.RUNNING,(a)=>{
  console.log('a',a)
  const {days, hours, minutes, seconds} = a
  let arr = [days, hours, minutes, seconds]
  const str = arr.map(num=>fillZero(num)).join(':')
  console.log('days',str)
  vue.$data.countdownStr = str
}) 
console.log(count_down)
setTimeout(() => {
  // console.log(vue)
  // vue.$data.countdownStr = '123'
  count_down.stop()
}, 10000);

export default Vue